<template>
  <div class="title" @click="btnClick" style="position: relative;">
    <div class="main">
      <img class="icon" src="~@/assets/img/icons/icon.png" alt="">
      <span class="name">{{ name }}</span>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZTitle',
  props: {
    name: {
      type: String,
      default: '带背景图的标题'
    }
  },
  methods:{
    btnClick() {
      this.$emit('click')
    }
  }

}
</script>

<style lang="scss" scoped>
  .title{
    .main {
      display: flex;
      // height: 24px;
      line-height: 16px;
      color: #37383A;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      align-items: center;
      vertical-align: top;
      .name {
        padding-left: 6px;
        // background: url('~@/assets/img/common/btk-left.png') no-repeat center;
        background-size: 100% 100%;
      }
      .icon {
        vertical-align: top;
        height: 16px;
      }
    }
    .right {
      position: absolute;
      top: 0;
      right: 0;
      height: 30px;
    }
  }

</style>
